import _ from 'lodash';
// import { uploaderFile } from '@/api/auth';
// import { HTTP_STATUS } from '@/utils/http';
import { Toast } from 'vant';
// import { getUploadFile } from '@/api/auth';
import formFileType from '@/components/Form/fieldType/file';
import { getQiNiuToken } from '@/api/flow/qiniu';
import * as qiniu from 'qiniu-js';
import { isWeixin } from '@/utils/device';
import { getPreviewFileBase64 } from '@/api/flow/template';

export default {
  props: {
    // 上传文件类型
    fileType: {
      type: Array,
      default: () => ['jpg', 'jpeg', 'png', 'gif']
    },
    // 最大数量
    maxCount: {
      type: Number,
      default: () => 0
    },
    // 最小数量
    minCount: {
      type: Number,
      default: () => 0
    },
    // 文件大小M
    size: {
      type: Number,
      default: () => 20
    },
    // 文件下载
    // 0 === 不许下载 / 1 === 下载源文件 / 2 === 下载水印文件
    download: {
      type: Number,
      default: () => 1
    },

    // 是否加水印
    isWatermark: {
      type: Boolean,
      default: () => false
    }
  },

  computed: {
    // 可预览的文件类型
    previewFileTypes() {
      return this.fileImgType.concat(this.documentTypes);
    },

    // 是否可以下载
    isDownload() {
      return this.download !== 0;
    },

    // 最大文件大小 byte
    maxSize() {
      return this.size === 0 ? undefined : (this.size * 1024 * 1024);
    },

    // 图片预览文件
    previewUrl() {
      // const { url, file } = this.preview;
      // const isImg = this.isImage(file.name);
      return this.fileError;
    },

    // 最大数量
    mCount() {
      return this.maxCount === 0 ? undefined : this.maxCount;
    },

    // 预览
    preview() {
      return this.previewFile.file;
    }
  },

  watch: {
    fileType: {
      immediate: true,
      handler(val) {
        const file = this.fileImgType;
        this.accept = _.map(
          val, (o) => {
            const str = file.indexOf(o) > -1 ? '' : 'image/';
            return `${str}${o}`;
          }
        );
      }
    },

    value: {
      immediate: true,
      handler(val) {
        const upLoaderList = [];
        _.forEach(val, ({ name, url }) => {
          if (url) {
            upLoaderList.push({
              file: { name },
              url
            });
          }
        });
        this.upLoaderList = upLoaderList;
      }
    }
  },

  data() {
    // 图片
    const fileImgTypes = ['jpg', 'jpeg', 'png', 'gif'];

    // 文档
    const documentTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];

    return {
      fileError: require('@/assets/images/loading/file.png'),

      // img
      fileImgType: fileImgTypes,

      // document
      documentTypes,
      // 上传数据
      upLoaderList: [],
      // 上传格式
      accept: [],
      formFileType,

      // 文件预览
      previewFile: {
        show: false,
        file: {
          file: {
            // 文件名称
            name: ''
          }
        }
      }
    };
  },

  methods: {
    // 下载图片
    downloadIamge(imgsrc, name) { // 下载图片地址和图片名
      // const image = new Image();
      // 解决跨域 Canvas 污染问题
      // image.setAttribute('crossOrigin', 'anonymous');
      // image.onload = function () {
      //   const canvas = document.createElement('canvas');
      //   canvas.width = image.width;
      //   canvas.height = image.height;
      //   const context = canvas.getContext('2d');
      //   context.drawImage(image, 0, 0, image.width, image.height);
      //   const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
      //   const a = document.createElement('a'); // 生成一个a元素
      //   const event = new MouseEvent('click'); // 创建一个单击事件
      //   a.download = name || 'photo'; // 设置图片名称
      //   a.href = url; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      // };
      // image.src = imgsrc;
    },

    // 下载文件
    downLoadFile() {
      const { url, file } = this.preview;
      if (!url) {
        Toast.fail('下载地址出错！');
        return;
      }

      if (isWeixin()) {
        Toast.fail('请通过浏览器打开！');
        return;
      }

      const a = document.createElement('a'); // 生成一个a元素
      const event = new MouseEvent('click'); // 创建一个单击事件
      a.download = file.name; // 设置文件名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    },

    // 是否为图片
    isImage(name) {
      let nameType = (name.split('.')) || [];
      nameType = nameType[nameType.length - 1];
      return this.fileImgType.indexOf(nameType) > -1;
    },

    // 是否预览文件
    isPreviewFile(name) {
      let nameType = (name.split('.')) || [];
      nameType = nameType[nameType.length - 1];
      return this.previewFileTypes.indexOf(nameType) > -1;
    },

    // 预览图片
    onPreview(file) {
      // file
      // this.$toast.success({
      //   message: '预览/下载请在电脑端操作！',
      //   icon: 'description'
      // });
      this.$set(this.previewFile, 'file', file);
      this.$set(this.previewFile, 'show', true);
    },

    // 重置内容
    resetValue() {
      if (this.canDo) return this.upLoaderList;
      this.upLoaderList = [];
    },

    // 文件读取前的回调函数
    beforeRead(file) {
      const { name } = file;
      let n = name.split('.');
      n = n[n.length - 1];
      const isType = this.fileType.indexOf(n) > -1;
      if (!isType) {
        this.$toast.fail(`请上传${this.fileType.toString()}格式!`);
        return false;
      }
      return true;
    },

    // 文件读取完成后的回调函数
    afterRead(file, content) {
      const { index } = content;

      this.uploadImg(file.file)
        .then(({ url, name }) => {
          this.upLoaderList.splice(index, 1, {
            file: { name },
            url
          });
        })
        .catch(() => {
          this.upLoaderList.splice(index, 1);
        })
        .finally(() => {
          this.onChange(_
            .map(this.upLoaderList, ({ file, url }) => ({
              name: file.name,
              url
            })));
        });
    },

    // 文件名
    fileNameHash(name) {
      const n = name.split('.');
      n[0] = `${n[0]}-${Date.now()}`;
      return n.join('.');
    },

    // 上传
    uploadImg(file) {
      const fileUrl = 'http://dev.inhoo.net.cn/';
      const toast = Toast.loading({
        message: '上传中0%',
        forbidClick: true,
        overlay: true,
        duration: 0
      });

      return new Promise((resolve, reject) => {
        // console.log(file, 'filefile');
        getQiNiuToken().then(({ uptoken: token }) => {
          const fileName = this.fileNameHash(file.name);
          const observable = qiniu.upload(file, fileName, token);
          observable.subscribe(
            (next) => {
              const { total } = next;
              toast.message = `上传中${window.parseInt(total.percent)}%`;
            }, // 进度
            (error) => {
              Toast.fail('上传失败');
              reject(error);
              toast.clear();
            },
            async (complete) => {
              try {
                const { key } = complete;
                // this.isPreviewFile(key) && (await getUploadFile({ filename: fileName }));
                resolve({ url: `${fileUrl}${key}`, name: key });
                toast.clear();
              } catch (error) {
                Toast.fail('上传失败');
                toast.clear();
                reject(error);
              }
            }
          );
        });
      });
    },

    // 文件大小回调
    onOversize() {
      Toast.fail(`最大上传文件大小为${this.size}M！`);
    }
  }
};
